<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="项目名称：">
                <span>{{ projectStore.projectModel.projectName }}</span>
            </el-form-item>
            <el-form-item label="说明：">
                <el-input v-model="projectStore.teamModel.mark" type="textarea" />
            </el-form-item>
            <el-form-item label="进出时间：">
                <el-date-picker v-model="projectStore.teamModel.startTime" clearable type="date"
                    placeholder="进入日期" />&nbsp;&nbsp;~&nbsp;&nbsp;<el-date-picker
                    v-model="projectStore.teamModel.endTime" clearable type="date" placeholder="退出日期" />
            </el-form-item>
        </el-form>
        <div class="title-div">
            团队成员管理
        </div>

        <!-- 成员表单开始 -->
        <div v-for="(member, tIndex) in projectStore.teamModel.members" :key="tIndex" class="sjplatform-form-item">
            <el-form-item :key="member.id" :label="'成员' + (tIndex + 1) + '：'">
                <el-input style="width: 200px;" v-model="member.userName" placeholder="点击选择成员"
                    @click="openUserSelectForm('选择成员', true, tIndex)" clearable @clear="clearmember(tIndex)" />
                <el-tooltip :content="'删除成员' + (tIndex + 1)" placement="bottom" effect="light">
                    <i class="del-icon" @click="delMember(tIndex)"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="进出时间：">
                <el-date-picker v-model="member.entryTime" clearable type="date" placeholder="进入日期" />~<el-date-picker
                    v-model="member.exitTime" clearable type="date" placeholder="退出日期" />
            </el-form-item>
            <el-form-item label="说明：">
                <el-input v-model="member.mark" type="textarea" placeholder="请输入成员描述" />
            </el-form-item>

        </div>
        <!-- 成员表单结束 -->

        <el-form label-width="100px">
            <el-form-item label="成员操作：">
                <el-tooltip content="添加成员" placement="bottom" effect="light">
                    <i class="add-icon" @click="addMember"></i>
                </el-tooltip>
                <el-tooltip content="导入成员" placement="bottom" effect="light">
                    <i class="import-icon"></i>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="isOpenUserSelectForm" :title="formTitle" width="50%" draggable :destroy-on-close="true">
        <UserSelect :initSelectedUser="initSelectedUser" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isOpenUserSelectForm = false; indexTmp = 0;">取消</el-button>
                <el-button type="primary" @click="confirmPerson">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import commonUtil from '../../../utils/common';
import UserSelect from "../../../components/SystemManager/User/UserSelect.vue";
import emitter from "../../../utils/emitter";
import { useProjectTeam } from "../../../hooks/ProjectManager/Plan/useProjectTeam";

let { projectStore, getTeamMembersByProjectId } = useProjectTeam(1, 10);

if (projectStore.teamModel.projectId) {
    getTeamMembersByProjectId(projectStore.teamModel.projectId).then(() => {
        //如果任务主表ID为空则表示还没有配置，生成一个主ID并给projectId赋值
        if (!projectStore.teamModel.id) {
            projectStore.teamModel.id = commonUtil.Methods.generateGUID();
            projectStore.teamModel.projectId = projectStore.projectModel.id;
        }
    })
}

//添加任务
function addMember() {
    // 添加新的任务对象
    projectStore.teamModel.members.push({
        id: commonUtil.Methods.generateGUID(),
        mid: projectStore.teamModel.id,
        projectId: projectStore.teamModel.projectId,
        userId: '',
        userName: '',
        mark: '',
        entryTime: null,
        exitTime: null,
    });
}
//删除任务
function delMember(index) {
    // 向指定任务的子项列表中添加新子项
    projectStore.teamModel.members.splice(index, 1);
}

/*--------------------选择负责人开始--------------------*/
let indexTmp = ref(0);//临时存储任务索引
let isOpenUserSelectForm = ref(false); //是否打开用户选择窗口
let formTitle = ref("");
let initSelectedUser = reactive({
    single: false,
    selectedrow: [],
});
//打开人员选择窗口
function openUserSelectForm(title, value, index) {
    formTitle.value = title;
    indexTmp.value = index;
    initSelectedUser.single = value;
    initSelectedUser.selectedrow = projectStore.teamModel.members[index].userId;
    isOpenUserSelectForm.value = true;
}
//清理负责人
function clearmember(index) {
    projectStore.teamModel.members[index].userId = '';
    projectStore.teamModel.members[index].userName = '';
}
//确认选择的负责人
function confirmPerson() {
    emitter.emit("confirmSelectedUser");
}
//供用户选择调用设置选择的项
emitter.on("set-selected-user", (SelectionRows: any) => {
    projectStore.teamModel.members[indexTmp.value].userId = SelectionRows.id;
    projectStore.teamModel.members[indexTmp.value].userName = SelectionRows.realName;

    isOpenUserSelectForm.value = false;
    indexTmp.value=0;
});
/*--------------------选择负责人结束--------------------*/

</script>